<template>
<div>
<el-container>
  <el-main>
    <div align="center" height="100px" style="margin:20px">
      <el-avatar :size="100" :src="info.avatar"> avatar </el-avatar>
    </div>
    <e-desc margin='0 12px' label-width='100px'>
      <e-desc-item label="姓名">{{info.name}}</e-desc-item>
      <e-desc-item label="年龄">{{ info.age }}岁</e-desc-item>
      <e-desc-item label="性别">{{ info.sex==1?'男':'女' }}</e-desc-item>
      <e-desc-item label="教师号">{{info.number}}</e-desc-item>
      <e-desc-item label="手机号">{{info.phone}}</e-desc-item>
      <!-- <e-desc-item label="操作" :span='3'>
        <template>
          <el-button size="small" type="primary">修改</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </e-desc-item> -->
    </e-desc>
  <div class="demo-image">

  </div>
  </el-main>
</el-container>
  </div>
</template>

<script>
import eDesc from "./component/eDesc.vue";
import EDescItem from "./component/eDescItem.vue"

import { mapGetters } from 'vuex'
import { getInfo } from '@/api/user'
export default {
  name: 'Dashboard',
  components:{
    eDesc,
    EDescItem
  },
  mounted(){
    this.token =  this.$store.getters.token;
    this.getInfo()
  },
  computed: {
    //从vuex中拿到公共数据，注意名字
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return{
      token:'',
      info:null,

    }
  },
  methods:{
    async getInfo(){
      let result =
        await getInfo(this.token);
      if (result.code == 20000) {
          this.info = result.data.teacher;
          console.log(this.info)
      }
    }
  }
}
</script>

<style>
  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
</style>

<style lang="scss" scoped>
.demo-image{
   width: 200px; 
   height: 200px;
   position: absolute;
   right:50px;
   bottom:50px;
   background:url(./dashboard.png);
   background-repeat:no-repeat;
   background-size:100% 100%;
}
</style>
